<template>
  <div class="relative z-30 footer">
    <van-tabbar route v-model="active" active-color="#1194F7" @change="changeIndex" fixed safe-area-inset-bottom>
      <van-tabbar-item name="optional" to="/optional">
        <span :class="[active === 'optional' ? 'active' : '']">{{ $t('Optional') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.optional.active : icon.optional.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="quotes" to="/quotes">
        <span :class="[active === 'quotes' ? 'active' : '']">{{ $t('quotes') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.quotes.active : icon.quotes.inactive" />
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="trade" to="/trade">
        <span :class="[active === 'trade' ? 'active' : '']">{{ $t('trade') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.trade.active : icon.trade.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item name="funds" to="/cryptos/funds">
        <span>{{ $t('资金') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.funds.active : icon.funds.inactive" />
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="news" to="/news">
        <span :class="[active === 'news' ? 'active' : '']">{{ $t('news') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.news.active : icon.news.inactive" />
        </template>
      </van-tabbar-item>
      <!-- <van-tabbar-item name="trade" to="/exchange">
        <span>{{ $t('trade') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.trade.active : icon.trade.inactive" />
        </template>
      </van-tabbar-item> -->
      <van-tabbar-item name="mine" to="/my">
        <span :class="[active === 'mine' ? 'active' : '']">{{ $t('my') }}</span>
        <template #icon="props">
          <img :src="props.active ? icon.mine.active : icon.mine.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useQuotesStore } from "@/store/quotes.store.js";
import { useI18n } from "vue-i18n";
import { useRoute } from 'vue-router';
import { watch } from "vue";
const { t } = useI18n()
const active = ref('home')
const route = useRoute()
if (route.path == "/trade/index") {
  active.value = 'trade'
} else if (route.path.indexOf('/quotes') != -1) {
  active.value = 'quotes'
} else if (route.path == "/news/index") {
  active.value = 'news'
} else if (route.path == "/my/index") {
  active.value = 'mine'
} else if (route.path == "/optional/index") {
  active.value = 'optional'
}else if (route.path == "/cryptos/funds") {
  active.value = 'funds'
}
let quotesStore = useQuotesStore()

watch(() => route.path, (nv) => {
  if (route.path == "/trade/index") {
    active.value = 'trade'
  } else if (route.path.indexOf('/quotes') != -1) {
    active.value = 'quotes'
  } else if (route.path == "/news/index") {
    active.value = 'news'
  } else if (route.path == "/my/index") {
    active.value = 'mine'
  } else if (route.path == "/optional/index") {
    active.value = 'optional'
  }
})
// 底部列表
const icon = {
  optional: {
    active: new URL('@/assets/imgs/footer/optional-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/optional.png', import.meta.url),
  },
  quotes: {
    active: new URL('@/assets/imgs/footer/quotes-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/quotes.png', import.meta.url),
  },
  news: {
    active: new URL('@/assets/imgs/footer/news-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/news.png', import.meta.url),
  },
  trade: {
    active: new URL('@/assets/imgs/footer/trade-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/trade.png', import.meta.url),
  },
  // funds: {
  //   active: new URL('@/assets/imgs/footer/funds-active.png', import.meta.url),
  //   inactive: new URL('@/assets/imgs/footer/funds.png', import.meta.url),
  // },
  mine: {
    active: new URL('@/assets/imgs/footer/menu-active.png', import.meta.url),
    inactive: new URL('@/assets/imgs/footer/menu.png', import.meta.url),
  }
}
const changeIndex = (index) => {
  // console.log(index)
}
</script>

<style lang="scss" scoped>
:deep(.van-tabbar-item__text) {
  font-size: 12px;
}

:deep(.van-tabbar-item--active) {
  background-color: #12192F;
  color: $color_main !important;
}

.van-tabbar--fixed {
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #12192F;
}

.van-tabbar--fixed::after {
  border-color: #21273C;
}

.blue {
  color: $blue !important;
}

.active {
  color: $blue !important;
}

.footer {
  img {
    width: 20px;
    height: 20px;
  }
}
</style>